<template>
  <div>
    <div v-for="(group, index) in groups" :key="index">
      <div class="flex justify-center items-center">
        <div class="w-1/3 mx-4">
          <el-form-item label="label:">
            <el-input v-model="group.label" placeholder="label"></el-input>
          </el-form-item>
        </div>
        <div class="w-1/3">
          <el-form-item label="value:">
            <el-input v-model="group.value" placeholder="值"></el-input>
          </el-form-item>
        </div>

        <div class="w-1/5 mx-2">
          <el-form-item>
            <el-tooltip content="删除当前option">
              <el-icon class="cursor-pointer" color="red" size="25" @click="removeGroup(index)">
                <CircleClose />
              </el-icon>
            </el-tooltip>
          </el-form-item>
        </div>
      </div>
    </div>

    <div class="flex justify-end">
      <div class="mr-10">
        <el-tooltip content="新增一组option">
          <el-icon class="cursor-pointer" color="black" size="32" @click="addGroup">
            <CirclePlus />
          </el-icon>
        </el-tooltip>
      </div>
      <div class="mx-2">
        <!--        <el-button @click="saveJson">保存</el-button>-->
        <!--        <pre>{{ json }}</pre>-->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElButton, ElInput } from "element-plus";

const groups = ref([{ label: "", value: "" }]);
const json = ref("");

function addGroup() {
  groups.value.push({ label: "", value: "" });
}

function removeGroup(index: number) {
  if (groups.value.length > 1 && index >= 0) {
    //groups.value.pop();
    groups.value.splice(index, 1);
  }
}

const GetJson = () => {
  json.value = JSON.stringify(groups.value);
  return json.value;
};

//设置键值对表单数据
const SetJson = (jsonData: string) => {
  groups.value = JSON.parse(jsonData);
};

defineExpose({ GetJson, SetJson });
</script>

<style>
pre {
  margin-top: 10px;
  padding: 10px;
  background-color: #eee;
}
</style>
